<template>
  <div>
    <el-row>
      <el-form :model="ruleForm"
               ref="ruleForm"
               :rules="rulesModify"
               :inline="true">
        <el-form-item label="旧密码"
                      label-width="80px"
                      prop="oldpassword"
                      class="common-style">
          <el-input v-model="ruleForm.oldpassword"
                    placeholder="请输入旧密码"
                    type="password"
                    class="common-style"></el-input>
        </el-form-item>
        <el-form-item label="新密码"
                      label-width="80px"
                      prop="newpassword"
                      class="common-style">
          <el-input v-model="ruleForm.newpassword"
                    placeholder="请输入新密码"
                    type="password"></el-input>
        </el-form-item>
        <el-form-item label="重复密码"
                      label-width="80px"
                      prop="repeatpassword"
                      class="common-style">
          <el-input v-model="ruleForm.repeatpassword"
                    type="password"
                    placeholder="请再次输入新密码"></el-input>
        </el-form-item>
        <div class="footer-style">
          <el-button @click="onCancel">取 消</el-button>
          <el-button type="primary"
                     @click="onConfirm('ruleForm')">确 定</el-button>
        </div>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { personalCenterApi } from '@/services/PersonalCenter';
var checkPwd = (rule, value, cb) => {
  //验证密码的正则表达式
  const regPwd =
    /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*)(?=.*[`~!@#$%^&*()_\-+=<>.?:"{}].*).{10,32}$/
  if (regPwd.test(value)) {
    return cb()
  }
  cb(new Error('密码需包含大小写字母、数字及特殊字符，长度在10-32位之间'))
}
export default {
  props: {
    todos: Number,
    catchBack: Function,
    catchSave: Function
  },
  data () {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.newpassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    };
    return {
      userInfo: {},//用户信息
      ruleForm: {
        oldpassword: '',
        newpassword: '',
        repeatpassword: ''
      },
      // 修改密码的formInline声明
      rulesModify: {
        oldpassword: [
          { required: true, message: '旧密码不能为空', trigger: 'blur' },
          // { required: true, validator: checkPwd, trigger: 'blur' },
        ],
        newpassword: [
          { required: true, message: '新密码不能为空', trigger: 'blur' },
          { required: true, validator: checkPwd, trigger: 'blur' },
        ],
        repeatpassword: [
          { required: true, message: '重复密码不能为空', trigger: 'blur' },
          { required: true, validator: validatePass2, trigger: 'blur' },
        ]
      },

    }
  },
  methods: {
    //取消
    onCancel () {
      this.ruleForm.oldpassword = ''
      this.ruleForm.newpassword = ''
      this.ruleForm.repeatpassword = ''
      this.catchBack('SUCCESS');
    },
    // 修改密码触发的事件
    onConfirm (datamodify) {
      this.$refs[datamodify].validate((valid) => {
        if (valid) {
          if (this.ruleForm.newpassword !== this.ruleForm.repeatpassword) {
            this.$message.error('两次密码不一致!')
          } else {
            personalCenterApi.updatePassword({
              data: {
                user_id: this.userInfo.user_id,
                old_password: this.ruleForm.oldpassword,
                new_password: this.ruleForm.newpassword
              }
            }).then((res) => {
              if (res.code == 0) {
                this.$confirm('密码修改成功,即将跳转到登录页, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  this.catchSave('SUCCESS');
                }).catch(() => {
                  this.dialogFormVisible = false
                })
              }
            }).catch((error) => {
              console.log(error)
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
  watch: {
    todos (n, o) {
      if (n == 1) {
        let userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
        this.userInfo = userInfo;
        this.userInfo.password = '*********';
      } else {
        this.userInfo = {};
      }
    }
  },
  created () {
    if (this.todos == 1) {
      let userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
      this.userInfo = userInfo;
      this.userInfo.password = '*********';
    }
  }
}
</script>

<style lang="scss" scoped>
.common-style {
  width: 100% !important;
}
.footer-style {
  text-align: center;
  padding-bottom: 20px;
}
</style>